<template>
	<view class="page">
		<!-- 图片 -->
		<view class="box">
			<image src="../../static/dengluZhuce/bg.png" mode="" class="bg"></image>
			<image src="../../static/dengluZhuce/logo.png" mode="" class="logo"></image>
		</view>
		<!-- 注册表单 -->
		<form action="" method="" class="biaodan">
			<view class="biaodan-img-ipt">
				<image src="../../static/dengluZhuce/name.png" mode="" class="xiaotu"></image>
				<input type="text" name="" id="" v-model="formData.username" placeholder="请输入用户名"
					placeholder-style="color:#d4d4d4;font-size:28rpx" class="biaodan-ipt" />
			</view>
			<view class="biaodan-img-ipt">
				<image src="../../static/dengluZhuce/password.png" mode="" class="xiaotu"></image>
				<input type="password" name="" id="" v-model="formData.password" placeholder="请输入密码"
					placeholder-style="color:#d4d4d4;font-size:28rpx" class="biaodan-ipt" />
				<image src="../../static/dengluZhuce/look.png" mode="" class="xiaotu eye"></image>
			</view>
			<view class="biaodan-img-ipt">
				<image src="../../static/dengluZhuce/password.png" mode="" class="xiaotu"></image>
				<input type="text" name="" id="" v-model="formData.phoneNum" placeholder="请输入手机号码"
					placeholder-style="color:#d4d4d4;font-size:28rpx" class="biaodan-ipt" />




				<button class="dx" style="color: #FFFFFF;" @tap="yanzhengma" v-if="show">发送短信</button>
				<button class="dx" style="color: #FFFFFF;" v-else>{{number}}秒</button>

			</view>
			<view class="biaodan-img-ipt">
				<image src="../../static/dengluZhuce/code.png" mode="" class="xiaotu"></image>
				<input type="text" name="" id="" v-model="formData.code" placeholder="请输入验证码"
					placeholder-style="color:#d4d4d4;font-size:28rpx" class="biaodan-ipt" maxlength="8" />

			</view>
			<view class="biaodan-t1">
				<text>已有账号?</text>
				<navigator class="biaodan-t1-n" url="/pages/denglu/denglu">立即登录</navigator>
			</view>
			<view class="biaodan-t1">
				<switch type="checkbox" color="#cccccc" style="transform:scale(0.6,0.6);" />
				<text class="t">我同意签署</text>
				<navigator class="biaodan-t1-n t">《用户协议》</navigator>
				<text class="t">和</text>
				<navigator class="biaodan-t1-n t">《隐私政策》</navigator>
			</view>
			<button type="button" @tap="zhuce">注册</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true, //显示
				number: 60, //60秒
				clearTimeSet: 0, //清除定时器
				getCode: '',
				formData: {
					username: '',
					password: '',
					phoneNum: '',
					code: ''
				}
			}
		},
		watch: {
			number(val) {
				if (val == 0) {
					this.clearTime()
					this.number = 60
				}
			}
		},
		methods: {
			async zhuce() {
				const a = {
					password: this.formData.password,
					username: this.formData.username,
					verificationCode: this.formData.code
				}
				console.log(a);
				const res = await this.$request({
					url: '/member/register',
					method: 'POST',
					data: a
				})
				if (res.code == 200 && this.getCode == this.formData.code) {
					uni.navigateTo({
						url: '/pages/denglu/denglu'
					})
				}
				console.log(res);
			},
		
			async yanzhengma() {
				const res = await this.$request({
					url: `/message/send?phoneNum=${this.formData.phoneNum}`,
					method: 'POST',
				})
				console.log(res);
				if (res.code == 200) {
					this.getCode = res.data
					this.show = false
					this.setTime()
					uni.showToast({
						title: '短信发送成功',
						duration: 2000,
					})
				}

			},
			setTime() { //设置定时器
				this.clearTimeSet = setInterval(() => {
					this.number--
					if (this.number == 0) {
						this.show = true
					}
				}, 1000);
			},
			clearTime() //清除定时器
			{
				clearInterval(this.clearTimeSet);
			},
		}
	}
</script>

<style scoped lang="scss">
	.dx {
		position: absolute;
		width: 180rpx !important;
		height: 60rpx !important;
		line-height: 60rpx !important;
		right: 0;
		top: 20rpx;
		z-index: 99;
	}

	.page {

		//图片
		.box {
			display: flex;
			position: relative;
			padding-bottom: 80rpx;

			.bg {
				height: 320rpx;
				width: 100%;
			}

			.logo {
				position: absolute;
				width: 166rpx;
				height: 168rpx;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 0;
			}
		}

		//注册表单
		.biaodan {
			margin: 0 auto;
			margin-top: 10rpx;
			width: 700rpx;
			display: flex;
			border-radius: 20rpx;
			border: 8rpx solid #fafafa;

			.xiaotu {
				width: 26rpx;
				height: 32rpx;
				margin: 0 20rpx 0 30rpx;
			}

			.biaodan-img-ipt {
				display: flex;
				align-items: center;
				position: relative;

				.eye {
					position: absolute;
					width: 40rpx;
					height: 30rpx;
					right: 0rpx;
					z-index: 99;
				}

				.codes {
					width: 280rpx;
					height: 78rpx;
					position: absolute;
					right: 0rpx;
					z-index: 99;
				}
			}

			.biaodan-ipt {
				width: 608rpx;
				height: 98rpx;
				border-bottom: 2rpx solid #fafafa;
			}

			.biaodan-t1 {
				display: flex;
				font-size: 28rpx;
				color: #868686;
				justify-content: center;
				flex-wrap: wrap;
				align-content: center;
				margin: 60rpx 0;

				.biaodan-t1-n {
					color: #3476fe;
				}

				.t {
					margin-top: 6rpx;
				}
			}

			button {
				width: 642rpx;
				height: 88rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				background-color: #5088fc;
				line-height: 88rpx;
				border-radius: 60rpx;
				margin-bottom: 54rpx;
			}

		}

	}
</style>
